import React, { Fragment } from 'react'
import {
  Typography,
  Layout,
  Tree,
  Alert,
  Icon,
  Button,
  Tooltip,
  List,
  Card,
  Tag,
  Table,
  Modal,
  InputNumber,
  Input,
  Select,
  Tabs,
  message,
  Switch,
  Pagination,
  Progress,
} from 'antd'
import { withI18n, Trans } from '@lingui/react'
import { connect } from 'dva'
import { Page } from 'components'
import { stringify } from 'qs'
import { router } from 'utils'

// import Filter from './component/Filter'
// import { router } from 'utils'
// import { UserLink, ProjectLink, DeviceLink } from 'components'
// import moment from 'moment'

const { Paragraph, Title } = Typography
const { Sider, Content } = Layout
const { TreeNode } = Tree
const { TabPane } = Tabs
// const { Paragraph, Title } = Typography
Array.prototype.remove = function(val) {
  var index = this.indexOf(val)
  if (index > -1) {
    this.splice(index, 1)
  }
}

const LightStrategyKey = 'STRATEGY'
const LightKey = 'LIGHT'
const topHieght = 400
const cmdlistHeight = 240
const extraspropsheight = 160

@withI18n()
@connect(({ cmdlist, app, loading }) => {
  const { isMobile } = app
  return { cmdlist, isMobile, loading }
})
class MultiCmd extends React.Component {
  componentWillUnmount() {
    const { dispatch } = this.props
    dispatch({ type: 'cmdlist/clearstore' })
    dispatch({ type: 'cmdlist/unsubscribeMissionNotify' })
  }
  componentDidMount() {
    const { dispatch } = this.props
    dispatch({ type: 'cmdlist/subscribeMissionNotify' })
  }
  render() {
    const { i18n, dispatch, location, isMobile, cmdlist, loading } = this.props
    const { list, pagination } = cmdlist
    const { query, pathname } = location

    const handleRefresh = newQuery => {
      router.push({
        pathname,
        search: stringify({ ...query, ...newQuery }, { arrayFormat: 'repeat' }),
      })
    }
    const onChange = (page, pageSize) => {
      handleRefresh({ page: page, pageSize: pageSize })
    }
    const cloumn = [
      // 执行时间，距离现在已经过去了多久
      {
        title: <Trans>Mission Id</Trans>,
        dataIndex: 'missionId',
        key: 'missionId',
        width: 100,
        render: (text, record) => {
          return <Tag onClick={e => {}}>{text}</Tag>
        },
      },
      {
        title: <Trans>Note</Trans>,
        dataIndex: 'Note',
        key: 'Note',
        width: 100,
      },
      {
        title: <Trans>Start Time</Trans>,
        dataIndex: 'StartTime',
        key: 'StartTime',
        width: 150,
      },
      // CostTime
      {
        title: <Trans>Cost Time</Trans>,
        dataIndex: 'CostTime',
        key: 'CostTime',
        width: 150,
        render: (text, record) => {
          return text && text == 'none' ? (
            <Tag>
              <Trans>None</Trans>
            </Tag>
          ) : (
            <span>
              {text}
              <Trans>Minutes</Trans>
            </span>
          )
        },
      },
      {
        title: <Trans>Progress</Trans>,
        dataIndex: 'Responsed',
        key: 'Responsed',
        width: 200,
        render: (text, record) => {
          const { Responsed, TotalChild } = record
          const percent = (Responsed / TotalChild) * 100
          return <Progress percent={percent} />
        },
      },
      {
        title: <Trans>Status</Trans>,
        dataIndex: 'Status',
        key: 'Status',
        width: 100,
        render: (text, record) => {
          const { Responsed, TotalChild } = record
          const percent = (Responsed / TotalChild) * 100
          // if (percent == 100) {
          //   return (
          //     <Tag>
          //       <Icon type="check" />
          //       &nbsp;<Trans>Stoped</Trans>
          //     </Tag>
          //   )
          // }
          if (text == 'Running') {
            return (
              <Tag>
                <Icon type="loading" />
                &nbsp;<Trans>Running</Trans>
              </Tag>
            )
          } else if (text == 'Stoped') {
            return (
              <Tag>
                <Icon type="check" style={{ color: 'green' }} />
                &nbsp;<Trans>Stoped</Trans>
              </Tag>
            )
          } else if (text == 'Stoped_Byman') {
            return (
              <Tag>
                <Icon type="stop" />
                &nbsp;<Trans>Manual Stop</Trans>
              </Tag>
            )
          } else if (text == 'Paused') {
            return (
              <Tag>
                <Icon type="pause" />
                &nbsp;<Trans>Paused</Trans>
              </Tag>
            )
          }
          return (
            <Tag>
              <Trans>Unknown</Trans>
            </Tag>
          )
        },
      },
      {
        title: <Trans>Operation</Trans>,
        key: 'Operation',
        width: 100,
        fixed: 'right',
        render: (text, record) => {
          const { missionId, Status } = record
          const commonprops = {
            size: 'small',
          }
          const commonstyle = {
            marginRight: 2,
            marginTop: 2,
          }
          const commoniconstyle = {
            marginRight: 2,
          }
          const ReStartBtn = (
            <Button
              {...commonprops}
              style={{ ...commonstyle }}
              onClick={e => {
                dispatch({
                  type: 'cmdlist/reStartMission',
                  payload: { missionId },
                }).then(() => {
                  handleRefresh({})
                })
              }}
            >
              <Icon
                type="rollback"
                style={{ ...commoniconstyle, color: 'green' }}
              />
              <Trans>Restart</Trans>
            </Button>
          )
          const StopBtn = (
            <Button
              type="danger"
              {...commonprops}
              style={{ ...commonstyle }}
              onClick={e => {
                dispatch({
                  type: 'cmdlist/StopMission',
                  payload: { missionId },
                }).then(() => {
                  handleRefresh({})
                })
              }}
            >
              <Icon type="close-square" style={{ ...commoniconstyle }} />
              <Trans>Manual Stop</Trans>
            </Button>
          )
          const ResumeBtn = (
            <Button
              {...commonprops}
              style={{ ...commonstyle }}
              onClick={e => {
                dispatch({
                  type: 'cmdlist/ResumeMission',
                  payload: { missionId },
                }).then(() => {
                  handleRefresh({})
                })
              }}
            >
              <Icon
                type="caret-right"
                style={{ ...commoniconstyle, color: 'green' }}
              />
              <Trans>Resume</Trans>
            </Button>
          )
          const PauseBtn = (
            <Button
              {...commonprops}
              style={{ ...commonstyle }}
              onClick={e => {
                dispatch({
                  type: 'cmdlist/PauseMission',
                  payload: { missionId },
                }).then(() => {
                  handleRefresh({})
                })
              }}
            >
              <Icon type="pause" style={{ ...commoniconstyle, color: 'red' }} />
              <Trans>Pause</Trans>
            </Button>
          )
          const DeleteBtn = (
            <Button
              {...commonprops}
              style={{ ...commonstyle }}
              type="danger"
              onClick={e => {
                dispatch({
                  type: 'cmdlist/deleteMission',
                  payload: {
                    missionId,
                  },
                }).then(() => {
                  handleRefresh({})
                })
              }}
            >
              <Icon type="delete" style={{ ...commoniconstyle }} />
              <Trans>Delete</Trans>
            </Button>
          )
          var btns = []
          if (Status == 'Running') {
            btns = [PauseBtn, StopBtn, ReStartBtn, DeleteBtn]
          } else if (Status == 'Paused') {
            btns = [ResumeBtn, StopBtn, ReStartBtn, DeleteBtn]
          } else if (Status == 'Stoped' || Status == 'Stoped_Byman') {
            btns = [ReStartBtn, DeleteBtn]
          }
          //
          // btns = [ReStartBtn, PauseBtn, ResumeBtn, StopBtn, DeleteBtn]
          //
          return btns
        },
      },
    ]
    return (
      <Page inner>
        <div
          style={{
            display: 'flex',
            justifyContent: 'space-between',
            alignItems: 'center',
          }}
        >
          <Title level={4} style={{ minWidth: 100 }}>
            <Trans>Historical Order</Trans>:
          </Title>
          <Button.Group>
            <Button
              onClick={e => {
                handleRefresh({})
              }}
              size="small"
            >
              <Icon type="sync" />
              &nbsp;<Trans>Refresh</Trans>
            </Button>
          </Button.Group>
        </div>
        <Table
          columns={cloumn}
          loading={loading.effects['cmdlist/queryMissions']}
          dataSource={list}
          pagination={false}
          scroll={{ x: 850 }}
        />
        <Pagination
          {...{
            size: 'small',
            ...pagination,
            onChange,
            onShowSizeChange: onChange,
            showTotal: total => i18n.t`Total ${total} Items`,
          }}
          showQuickJumper={true}
          simple={isMobile}
          // hideOnSinglePage={true}
          style={{
            width: '100%',
            height: 30,
            display: 'flex',
            justifyContent: 'center',
            marginTop: 10,
          }}
        />
      </Page>
    )
  }
}

export default MultiCmd
